<template>
    <div class="product-detail">
        <div class="n-price">
            <div class="n-price-left">

                <!-- <span class="price-new">新人价</span> -->
                <span class="curprice">
                    ¥<i>{{skuPrice.currentPrice}}</i></span>
                <!-- <span class="price">¥{{skuPrice.newUserPrice}}</span> -->
                <!-- <span class="kaola-price">¥{{skuPrice.kaolaPrice}}</span>
                 <span class="mrkprice">¥629</span> -->
                 <!-- <span class="tag">4.4折</span> -->
                 <span class="tag">特价</span>
            </div>
        </div>
        <div class="n-membertip">
            <div class="mline1">
                <img alt="" :src="vipLayoutInfo.iconImg" class="micon">
                <span class="maintxt">黑卡会员预计可<i style="color:#FF0000;">省¥{{vipLayoutInfo.expectSaveMoney}}</i></span>
                <img src="https://haitao.nosdn1.127.net/79336f9f-4623-47e8-ada8-7292668a8006_48_48.png?imageView&amp;thumbnail=39x39&amp;quality=100" class="mpoint">
                
            </div>
            <div class="mline2">
                <span class="subtxt">{{vipLayoutInfo.subText}}</span>
            </div>

            <div class="mlink">
                <span class="mtxt">{{vipLayoutInfo.openCardText}}</span>
                <i class="marr"></i>
            </div>
        </div>
        <h4 class="n-title f-els-2">
            {{ProductTitle.title}}
        </h4>
        <p class="n-subtit">

            珂润保湿面霜，冰激凌质感，一抹冰凉，再抹肌肤顺滑，敏感肌肤的福音，平价中的战斗机，完全不输贵妇品牌，补水效果实力优厚，第二天起来给肌肤水润嘭嘭感，给人一夜惊喜！
        </p>
        <div class="n-tagbox">
            <div class="n-taginfo">
                
                <img class="v-flagimg" src="https://haitao.nosdn2.127.net/1cc2m9est21_46_46.png?imageView&amp;thumbnail=32x0&amp;quality=75">
                <span class="tagtxt">日本品牌</span>

                
                <img class="v-flagimg" src="https://haitao.nos.netease.com/183cb5b6-0edd-45d5-9218-3f5d3ab33244.png?imageView&amp;thumbnail=32x0&amp;quality=75">
                <span class="tagtxt">网易自营</span>

                    <img class="v-flagimg" src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png?imageView&amp;thumbnail=32x0&amp;quality=75">
                    
                <span class="tagtxt">跨境商品</span>

            </div>

        </div>           
    </div>

</template>
<script>
    import { mapGetters }  from "vuex"
    export default { 
        computed: {
            ...mapGetters("ProductList",[
                "skuPrice","vipLayoutInfo","ProductTitle"
            ])
        }

    }
</script>

<style lang="stylus" scoped>
   .product-detail
        .n-price-left
            margin-left 10px
            height .5rem
            line-height .5rem
            display flex
            align-items center
            // .price-new
            //     color #e31436
            //     font-size .17rem
            //     font-weight 700
            .curprice
                font-size .15rem
                color #e31436
                box-sizing: border-box
                vertical-align bottom
                
                i   
                    padding 0 -0.02rem
                    font-size .27rem
                    font-weight 700
                    font-style normal
     

            .price
                color #e31436
                margin-right 8px
                font-size .29rem
                font-weight 700
                vertical-align -.01rem
                text-shadow 0 0 black
            .kaola-price
                display inline-block
                font-size .12rem
                color #333
                padding-top .05rem
            .mrkprice
                text-decoration line-through
                margin-left .08rem
                font-size .13rem
                color #999
                box-sizing: border-box
                vertical-align bottom
            .tag
                display inline-block
                padding 0 .05rem
                height .15rem
                line-height .15rem
                text-align center
                margin-left .10rem
                vertical-align .1rem
                font-size .11rem
                color #fff
                background #ff8587
                border-radius .03rem

         
        .n-membertip
            position relative
            margin .05rem .1rem .1rem
            padding .06rem .6rem .06rem .1rem
            background #f7f7f7
            .mline1
                overflow hidden
                display block
                line-height .21rem
                height .21rem
                font-size 0
                white-space nowrap
                img
                    &.micon
                        display inline-block
                        vertical-align middle
                        width auto
                        height .15rem
                        line-height .15rem
                        padding 0 .08rem .08rem 0
                    &.mpoint
                        display inline-block
                        vertical-align middle
                        width .13rem
                        height .13rem
                        padding 0 0 .08rem .08rem
                    
                    
                span
                    overflow hidden
                    word-wrap normal
                    white-space nowrap
                    text-overflow ellipsis
                    line-height .21rem
                    height .21rem
                    font-size .12rem
                    color #333
                    i
                        font-weight 700
                        color #FF0000
                        font-style normal
            .mline2 
                display flex
                align-items flex-start
                justify-content flex-start   
                span
                    overflow hidden
                    word-wrap normal
                    white-space nowrap
                    text-overflow ellipsis
                    display block
                    line-height .21rem
                    font-size .12rem
                    color #999
                    margin-right .05rem
            .mlink
                position absolute
                top 0
                right 0
                display flex
                justify-content center
                align-items center
                height .54rem
                width .55rem
                background #f3eee3               
                span
                    flex 0 0 .24rem
                    line-height .16rem
                    font-size .12rem
                    color #333
                i
                    position: relative;
                    flex: 0 0 .05px;
                    margin-left: .01px
                    &:after
                        position absolute
                        top -.03rem
                        left .01rem
                        content " "
                        width .06rem
                        height .06rem
                        border .01rem solid #333
                        border-color #333 #333 transparent transparent
                        transform rotate(45deg)
        .n-title
            line-height .18rem
            padding-top .10rem
            margin 0 .10rem .06rem
            font-size .14rem
            color #333
            font-weight 700
            border-top .01rem solid #f0f0f0
        .n-subtit 
            padding 0 .10rem
            font-size .13rem
            color #333
            line-height .21rem
        
        .n-tagbox 
            margin-bottom .1rem
            height .356rem
            background #f7f7f7
            .n-taginfo
                padding .09rem 0 9rem .10rem
                margin .10rem .10rem 0

                img
                    float left
                    display block
                    width .16rem
                    height .16rem
                    margin-right .06rem
                span
                    float left
                    margin-right .10rem
                    font-size .12rem
                    color #666


</style>